<template>
    <div>
        <Table size="small" ref="table" :columns="columns" :data="data" :loading="loading" @on-sort-change="sortchange">
            <template slot-scope="{ row }" slot="info">
                <a href="javaScript:;" @click="handleDetailPatient(row)">{{ row.name }} , {{ row.age }} ,
                    {{ row.gender_str }}
                 <Tag class="blueStatus ivu-ml-16" v-if="+row.in_hospital_status===1" color="primary">{{ `${+row.in_hospital_status === 1 ? '住院' : ''}` }}</Tag>
                </a>
            </template>
            <template slot-scope="{ row }" slot="diagnosis">
                <Tag class="blueStatus" v-if="row.outpatient_name" color="blue">{{ row.outpatient_name }}</Tag>
            </template>
            <template slot-scope="{ row }" slot="label">
                <Poptip word-wrap trigger="hover" placement="right" width="400">
                    <Tag v-for="(item, index) in row.patient_tags_name_arr" :key="index" v-if="index < 3">
                        {{ item }}</Tag>
                    <div slot="content">
                        <Tag v-for="(item, index) in row.patient_tags_name_arr" :key="index">{{ item }}</Tag>
                    </div>
                </Poptip>
            </template>
            <template slot-scope="{ row }" slot="patient_card_id">
                <span v-if="row.patient_card_id">
                    <span v-if="row.patient_card_id.length < 15">
                        {{row.patient_card_id}}
                    </span>
                    <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200"
                        :content="row.patient_card_id">
                        {{row.patient_card_id.substring(0, 15)}}…
                    </Poptip>
                </span>
                <span v-else>无</span>
            </template>
            <template slot-scope="{ row }" slot="next_revisiting_time_str">
                <div v-if="!row.show" class="DatePicker " @click="aaa" @dblclick="DatePicker (row)">
                    {{row.next_revisiting_time_str === '' ? '&#12288;' : row.next_revisiting_time_str}}
                </div>
                <DatePicker :transfer="true" v-if="row.show" v-model="next_revisiting_time_strs"
                    placement="bottom" :options="options" confirm type="date" placeholder="请选择下次复诊时间"
                    style="width: 80px" @on-ok="confirm(row)" @on-clear="OnClear(row)"></DatePicker>
            </template>
            <template slot-scope="{ row }" slot="belong_member_name">
                <span v-if="row.belong_member_name">
                    <span v-if="row.belong_member_name.length < 4">
                        {{row.belong_member_name}}
                    </span>
                    <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200"
                        :content="row.belong_member_name">
                        {{row.belong_member_name.substring(0, 4)}}…
                    </Poptip>
                </span>
                <span v-else>无</span>
            </template>
            <template slot-scope="{ row }" slot="channel">
                <Badge status="success" :text="row.source_name" />
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <a @click="handleOpenDrawer(row.id)">编辑</a>
                <Divider type="vertical" />
                <a @click="handleOpenSubmit(row)">回访</a>
            </template>
            <template slot-scope="{ row }" slot="remark">
                <Tooltip :content="row.remark" :delay="500" placement="left" theme="light" max-width="500"
                    :word-wrap="true" :transfer="true">
                    <span
                        style="font-size: 12px">{{  row.remark && row.remark.length > 14 ? row.remark.slice(0, 14) +  '...' : row.remark }}</span>
                </Tooltip>
            </template>
            <template slot="footer">
                <Page
                    show-total show-elevator
                    show-sizer transfer
                    :total="total"
                    :current.sync="params.page"
                    :page-size="params.pageSize"
                    :page-size-opts="pageOpts"
                    @on-change="changepage"
                    @on-page-size-change="changepageSize"
                    style="text-align: center;"
                />
            </template>
        </Table>
        <edit-patient ref="editPatient" @ok="$emit('askData')" />
        <table-model ref="editModel" @close="closeEdit" />
        <Drawer :closable="false" v-model="showTetailDrawer" width="1000" class="edtailDrawers"  >
            <detailDrawer :editType="edit_type" v-if="patientId&&showTetailDrawer" :patientId="patientId">
            </detailDrawer>
        </Drawer>
    </div>
</template>
<script>
    import { serveList, updateNextRevisitingTime } from '@/api/patient'
    import tableModel from '@/components/visitModel/table-model';
    import EditPatient from '@/pages/home/patient/patient-list/modules/editPatient'
    import detailDrawer from '@/pages/home/patient/patient-detail/index.vue'
    export default {
        components: {
            EditPatient,
            tableModel,
            detailDrawer
        },
        name: 'JG-table',
        props: {
            params: { type: Object },
            data: { type: Array },
            loading: { type: Boolean },
            total: { type: [String, Number] },
            edit_type: { type: [String, Number] }
        },
        data () {
            return {
                pageOpts: [10, 20, 50, 100],
                patientId: null,
                showTetailDrawer: false,
                next_revisiting_time_strs: '',
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                },
                row: {
                    show: false
                },
                columns: [
                    { title: '基本信息', slot: 'info', minWidth: 200, fixed: 'left' },
                    { title: '诊疗号', key: 'patient_card_id', slot: 'patient_card_id', sortable: 'custom', minWidth: 110 },
                    { title: '诊室', key: 'clinic_name', minWidth: 80 },
                    { title: '上次到诊', key: 'last_revisiting_time_str', sortable: true, minWidth: 110 },
                    { title: '创建日期', key: 'created_at_str', sortable: true, minWidth: 110 },
                    { title: '未到诊天数', key: 'missed_days', sortable: 'custom', minWidth: 115 },
                    { title: '下次复诊', key: 'next_revisiting_time_str', slot: 'next_revisiting_time_str', sortable: true, minWidth: 110 },
                    { title: '患者标签', slot: 'label', minWidth: 180 },
                    { title: '病种', key: 'diseases_name', minWidth: 120 },
                    { title: '总复诊次数', key: 'revisiting_count', sortable: 'custom', minWidth: 120 },
                    { title: '复诊次数', key: 'revisiting_time_count', minWidth: 100 },
                    { title: '断诊次数', key: 'fault_diagnosis_count', minWidth: 100 },
                    { title: '上次到诊时间', key: 'last_revisiting_time_str', sortable: true, minWidth: 130 },
                    { title: '上次回访时间', key: 'last_callback_time_str', sortable: true, minWidth: 150 },
                    { title: '下次回访时间', key: 'next_callback_time_str', sortable: true, minWidth: 150 },
                    { title: '回访次数', key: 'callback_count', sortable: 'custom', minWidth: 110 },
                    { title: '就诊类型', slot: 'diagnosis', minWidth: 100 },
                    { title: '地区', key: 'city_name', minWidth: 150 },
                    { title: '备注', minWidth: 120, ellipsis: true, tooltip: true, key: 'remark' },
                    { title: '来源', minWidth: 120, slot: 'channel' },                   
                    { title: '归属人', key: 'belong_member_name', slot: 'belong_member_name', minWidth: 120 },
                    { title: '操作', minWidth: 110, slot: 'action', fixed: 'right' }
                ]
            }
        },
        mounted () {
           
        },
        methods: {
            _selectList(){
                //  serveList({ page: 1, pageSize: 1 }).then(res => {
                //     this.typeList = res.condition.outpatient_type_list
                //     this.labelList = res.condition.tags_list
                // })
            },

            /* @函数功能: 分页 */
            changepage (e) {
                this.params.page = e;
                this.$emit('askData');
            },
            /* @函数功能: 每页数量 */
            changepageSize (e) {
                this.params.pageSize = e;
                this.$emit('askData');
            },
            /* @函数功能: 列表排序 */
            sortchange (e) {
                let sort = 0
                if (e.order === 'desc') {
                    sort = 2;
                } else if (e.order === 'asc') {
                    sort = 1;
                } else {
                    sort = 0;
                }
                this.$emit('sortchange', { sort, key: e.key })
            },
            // 编辑
            handleOpenDrawer (id) {
                this.$refs.editPatient.handleOpenDrawer(id, this.edit_type)
            },
            // 回访
            handleOpenSubmit (row) {
                this.$refs.editModel.handleShow(row, this.typeList, this.labelList, this.edit_type)
            },
            // 清除
            OnClear (row) {
                row.show = !row.show
            },
            // 确认日期
            confirm (row) {
                if (row.next_revisiting_time_str === '') {
                    row.next_revisiting_time_str = this.$Date(new Date()).format('YYYY-MM-DD')
                    const config = {
                        id: row.id,
                        next_revisiting_time: row.next_revisiting_time_str
                    }
                    updateNextRevisitingTime(config).then(res => {
                        row.show = !row.show
                    })
                } else {
                    this.next_revisiting_time_strs = this.$Date(this.next_revisiting_time_strs).format('YYYY-MM-DD')
                    const config = {
                        id: row.id,
                        next_revisiting_time: this.next_revisiting_time_strs
                    }
                    updateNextRevisitingTime(config).then(res => {
                        row.next_revisiting_time_str = this.next_revisiting_time_strs
                        row.show = !row.show
                    })
                }
            },
            // 单机事件
            aaa () {
                this.row.next_revisiting_time_strs = this.$Date(this.row.next_revisiting_time_strs).format('YYYY-MM-DD')
                this.row.show = false
            },
            // 双击事件
            DatePicker (e) {
                this.next_revisiting_time_strs = e.next_revisiting_time_str
                this.row = e
                e.show = !e.show
            },
            handleDetailPatient (row) {
                this.patientId = row.id
                this.showTetailDrawer = true
            },
            closeEdit (val) {
                if (val) {
                    this.$emit('askData')
                }
            }
        }
    }
</script>
